<template>
  <div class="image-container">
    <el-header>
      <el-button class="el-button" type="primary" size="mini" @click="addCategoryBtn('add')">新增图片分类</el-button>
      <el-button class="el-button" type="warning" size="mini" @click="uploadImgBtn">上传图片</el-button>
    </el-header>

    <!-- 页面主体区  嵌套容器  包裹 Aside与Main -->
    <el-container v-loading="loading" class="center">
      <!-- 左侧 -->
      <el-aside width="200px">
        <SidebarList ref="sidebarList" @changeStatus="addCategoryBtn" />
      </el-aside>
      <!-- 主体 -->
      <el-main>
        <ImageList />
      </el-main>
    </el-container>

    <!-- 添加分类弹层 -->
    <AddCategoryDialog
      v-if="addOrEdit"
      :dialog-show.sync="categoryDialogShow"
      :add-or-edit.sync="addOrEdit"
      @getCategoryList="getCategoryListFn"
    />
    <!-- 上传图片弹层 -->
    <UploadImgDialog :dialog-show.sync="imageDialogShow" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import ImageList from './components/image-list.vue'
import SidebarList from './components/sidebar-list.vue'
import AddCategoryDialog from './components/add-category-dialog.vue'
import UploadImgDialog from './components/upload-img-dialog.vue'
export default {
  name: 'ImageContainer',
  components: {
    ImageList,
    SidebarList,
    AddCategoryDialog,
    UploadImgDialog
  },
  data() {
    return {
      categoryDialogShow: false, // 控制add弹层
      imageDialogShow: false, // 控制upload弹层
      addOrEdit: null
    }
  },
  computed: {
    ...mapGetters(['loading'])
  },
  methods: {
    getCategoryListFn() {
      this.$refs.sidebarList.getCategoryList()
    },
    addCategoryBtn(status) {
      this.addOrEdit = status
      this.categoryDialogShow = true
    },
    uploadImgBtn() {
      this.imageDialogShow = true
    }
  }
}
</script>

<style lang="scss" scoped>
.image-container {
  background-color: #fff;
  height: 555px;
  .el-header {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eeeeee;
    height: 55px !important;
  }
    .center {
      .el-aside {
        overflow: unset;
        background-color: unset;
        width: 220px !important;
        padding: 0;
        margin: 0;
        height: 500px;
      }
      .el-main {
        padding: 0;
        height: 500px;
        overflow: unset;
      }
    }
}
</style>
